<template>
    <div class="g">
         <div class="ghead">
            <router-link to="/gm" class="gl">商品管理</router-link>
            <router-link to="/add" class="tj">商品添加</router-link>
            <router-link to="/fl" class="fl">分类管理</router-link>
            <b class="fa fa-search"></b>
            <b class="fa fa-filter"></b>
            <b  class="fa fa-exchange"></b>
            <b class="qh" v-on:click="fun1()">切换查看</b>
          </div>
        <div class="xia" v-if="see">
            <div class="a">
            <img src="./assets/img/goods006.jpg" />
            <a>西梅</a>
            <a>¥123</a>
            <a>拣货中</a>
            <button onclick="xiugai()">修改</button>
            <button onclick="shanchu()">删除</button>
        </div>
        <div class="b">
            <img src="./assets/img/goods011.jpg" />
            <a>树莓</a>
            <a>¥123</a>
            <a>拣货中</a>
            <button onclick="xiugai()">修改</button>
            <button onclick="shanchu()">删除</button>
        </div>
        <div class="c">
            <img src="./assets/img/goods012.jpg" />
            <a>猕猴桃</a>
            <a>¥123</a>
            <a>拣货中</a>
            <button onclick="xiugai()">修改</button>
            <button onclick="shanchu()">删除</button>
        </div>
        <div class="d">
            <img src="./assets/img/goods015.jpg" />
            <a>椰子</a>
            <a>¥123</a>
            <a>拣货中</a>
            <button onclick="xiugai()">修改</button>
            <button onclick="shanchu()">删除</button>
        </div>
        <div class="di">
            <router-link to="/gm">上一页</router-link>
        </div>
    </div>
    <div class="goodslist" v-if="seen">
            <div class="a">
                <div class="list item-1"></div>
                <div class="list item-2"></div>
                <div class="list item-3"></div>
                <div class="list item-4"></div>
                <div class="list item-5"></div>
                <div class="list item-6"></div>
            </div>
            <div class="b">
                <div class="list item-1"></div>
                <div class="list item-2"></div>
                <div class="list item-3"></div>
                <div class="list item-4"></div>
                <div class="list item-5"></div>
                <div class="list item-6"></div>
            </div>
    </div>
</div>

</template>
<script>
module.exports = {
    data() {
        return {
             seen:false,
             see:true
        };
    },
    methods: {
        fun1(){
           if(this.see==true){
               this.see=false;
                this.seen=true;
           }else{
               this.see=true;
                this.seen=false;
           }

        }
    }
};
</script>
<style>
     .xia{
            position: relative;
            width: 800px;
            height: 400px;
        }
        .a{
            top:25%;
            position: absolute;
            width: 900px;
            height: 80px;
            background-color: rgb(52, 204, 209);
            margin: 10px 10px 10px 10px;
            text-align: center;
        }
        .b{
            top:50%;
            position: absolute;
            width: 900px;
            height: 80px;
            background-color: rgb(52, 204, 209);
            margin: 10px 10px 10px 10px;
            text-align: center;
        }
        .c{
            top:75%;
            position: absolute;
             width: 900px;
            height: 80px;
            background-color: rgb(52, 204, 209);
            margin: 10px 10px 10px 10px;
            text-align: center;
        }
        .d{
            top:100%;
            position: absolute;
            width: 900px;
            height: 80px;
            background-color: rgb(52, 204, 209);
            margin: 10px 10px 10px 10px;
            text-align: center;
        }
        .xia img {
            width: 60px;
            }



         .ghead{

       position: relative;
    }
    .gl{
        color: black;
        left:10%;
        position: absolute;
    }
    .tj{
        color: black;
        left:20%;
        position: absolute;
    }
    .fl{
        color: black;
        left:30%;
        position: absolute;
    }
    .fa-search{
        left:40%;
        position: absolute;
    }
    .fa-filter{
        left:50%;
        position: absolute;
    }
    .fa-exchange{
        left:60%;
        position: absolute;
    }
    .qh{
        color: black;
        left:70%;
        position: absolute;
    }



    .a .b {
        width: 100%;
        display: flex;
        justify-content: space-between;
        background-color: rgb(238, 216, 70);;
    }
    .list {
        width: 120px;
        height: 150px;
        margin: 2px;
        float: left;
        border-radius: 15%;
        background-color: aliceblue;
    }

</style>